import React, { useState,useEffect} from 'react'
import { Sidebar, Toast } from 'react-vant';
import { getList,getClassList } from '../../api/index'
import { useNavigate } from 'react-router-dom'

function Classify() {
  const [list,setList]=useState([]);
  const [active, setActive] = useState(0);
  const [activList,setActivList]=useState([])

  const navigate =useNavigate();

  useEffect(()=>{
    (async()=>{
      let newDate=await getClassList();
      console.log(newDate)
      setList(newDate.data)
      setActivList(newDate.data[0].chidren)
    })()
 },[])

 const getGoDetail= (val)=>{
  console.log(val);
  // console.log(navigate)
  // navigate('/detail');
  navigate("/detail/"+val,{state:val})
 }

  return (
    <div className='classifts'>
     
      <Sidebar
      value={active}
      onChange={(v) => {
        setActive(v);
        console.log("v是",v)
        // Toast.info(`标签名 ${v + 1}`);
      }}
     
    > 
      {
        list && list.map((item,index)=>{
          return <Sidebar.Item title={item.title} key={index} />
        })
      }
 
    </Sidebar>
    <div className='rights'>
        {
          activList &&activList.map((item,index)=>{
              return <div className='divs' key={index} onClick={()=> getGoDetail(item.id) }> 
                      <img src={item.img} alt="" />
                      <p>{item.title}</p>
              </div>
          })
        }
    </div>
    </div>
  )
}

export default Classify